import React, { Component } from "react";

export default class App extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this, 1);
  }
  state = {
    msg: "hello react",
  };
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <button onClick={this.handleClick}>1. 没有修改this指向</button> <br />
        {/* 如果没有传参默认传递 event对象，如果传参传递具体的值 */}
        <button onClick={this.handleClick.bind(this, 1)}>
          2. 通过bind的方式修改this的指向
        </button>
        <br />
        {/* 该写法在配置event 的时候更为清晰可以指定event 传递的参数位置 */}
        <button onClick={(e) => this.handleClick(e, 1)}>
          3. 通过箭头函数的方式修改this的指向
        </button>
        <br />
        {/* 该写法传递的方式和 第二种差不多 */}
        <button onClick={this.handleClick}>
          4. 先在构造函数中利用bind修改this指向
        </button>
        <br />
        {/* 该写法如果需要传递还需要进一步的配置箭头函数 */}
        <button onClick={() => this.handleClick(1)}>
          5.以箭头函数的方式定义函数
        </button>
      </div>
    );
  }
  handleClick(num, e) {
    console.log(num, e);
    // console.log(this.state.msg);
    // console.log("点我");
  }
  // handleClick = (num) => {
  //   console.log(num);
  // };
}
